<template>
  <div class="container">
    <Breadcrumb
      :items="[$t('menu.production'), $t('menu.production.machine')]"
    />
    <div style="margin: 20px 0">
      <a-button type="primary" disabled style="margin-right: 20px"
        >选择版本序列</a-button
      >
      <a-tree-select
        :data="treeData"
        placeholder="Please select ..."
        style="width: 300px"
        :fieldNames="{
          key: 'id',
          title: 'cat_name',
          children: 'son',
        }"
        @change="changeTableList"
      ></a-tree-select>
      <a-button type="primary" style="margin: 0 20px" @click="add"
        >新增分类</a-button
      >
      <a-button type="primary" style="margin-right: 20px" @click="change"
        >修改分类</a-button
      >
      <a-button type="primary" style="margin-right: 20px" @click="del"
        >删除分类</a-button
      >
    </div>

    <a-table :columns="columns" :data="data">
      <template #province="{ record, rowIndex }">
        <a-button
          type="primary"
          style="margin-right: 20px"
          @click="detail(record)"
          >详情</a-button
        >
        <a-button
          type="primary"
          style="margin-right: 20px"
          @click="changeHandler(record)"
          >修改状态</a-button
        >
        <a-popconfirm content="你确定要删除吗?" @ok="delItem(record)">
          <a-button type="primary" style="margin-right: 20px">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <a-drawer
      title="详情"
      :width="1000"
      :visible="visible"
      @ok="handleCancel"
      @cancel="handleOk"
      unmountOnClose
    >
      <a-form :model="form">
        <a-form-item field="id" label="id">
          <a-input v-model="form.id" />
        </a-form-item>
        <a-form-item field="cat_id" label="一级分类id">
          <a-input v-model="form.cat_id" />
        </a-form-item>
        <a-form-item field="cat_second_id" label="二级分类id">
          <a-input v-model="form.cat_name" />
        </a-form-item>
        <a-form-item field="code" label="机器编号">
          <a-input v-model="form.code" />
        </a-form-item>
        <a-form-item field="country" label="地区">
          <a-input v-model="form.country" />
        </a-form-item>
        <a-form-item field="create_time" label="创建时间">
          <a-input v-model="form.create_time" />
        </a-form-item>
        <a-form-item field="is_activation" label="是否激活">
          <a-input v-model="form.is_activation" />
        </a-form-item>
        <a-form-item field="status" label="购买状态">
          <a-input v-model="form.status" />
        </a-form-item>

        <a-form-item field="version_name" label="version_name">
          <a-input v-model="form.version_name" />
        </a-form-item>
        <a-form-item field="id" label="id">
          <a-input v-model="form.id" />
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-modal v-model:visible="statusVisible" @ok="Ok" @cancel="Cancel">
      <template #title> 修改状态 </template>
      <a-select placeholder="Please select ..." @change="changeStatusHandler">
        <a-option value="10">备货中</a-option>
        <a-option value="20">组装中</a-option>
        <a-option value="30">测试中</a-option>
        <a-option value="40">打包出货</a-option>
      </a-select>
    </a-modal>

    <a-modal v-model:visible="statusVisible2" @ok="Ok1" @cancel="Cancel">
      <template #title> 新增 </template>

      <a-form-item label="请先选择一级分类">
        <a-select
          @change="changeStatusHandler"
          v-model="values"
          :options="options"
          :field-names="fieldNames"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="请输入二级分类名称">
        <a-input v-model="secondName" @change="changeSecondName" />
      </a-form-item>
    </a-modal>

    <a-modal v-model:visible="statusVisible3" @ok="Ok2" @cancel="Cancel">
      <template #title> 修改分类 </template>
      <a-form-item label="请选择二级分类名称">
        <a-tree-select
          :data="treeData"
          placeholder="Please select ..."
          style="width: 300px"
          :fieldNames="{
            key: 'id',
            title: 'cat_name',
            children: 'son',
          }"
          @change="changeOne"
        ></a-tree-select>
      </a-form-item>
      <a-form-item label="请输入要修改的二级分类名称">
        <a-input v-model="changeName" @change="changeSecondNameHandler" />
      </a-form-item>
    </a-modal>

    <a-modal v-model:visible="statusVisible4" @ok="Ok3" @cancel="Cancel">
      <template #title>分类删除 </template>
      <a-form-item label="请选择要删除的二级分类名称">
        <a-tree-select
          :data="treeData"
          placeholder="Please select ..."
          style="width: 300px"
          :fieldNames="{
            key: 'id',
            title: 'cat_name',
            children: 'son',
          }"
          @change="delOne"
        ></a-tree-select>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import {
    productTree,
    productList,
    changeStatus,
    delProduction,
    producOne,
    addproducOne,
    deleteProductionCat,
    editProductionCat,
  } from '@/api/production';
  import { Message } from '@arco-design/web-vue';
  import { onMounted, ref, reactive } from 'vue';

  onMounted(() => {
    getProductTree();
  });

  const getProductTree = () => {
    productTree().then((res) => {
      treeData.value = res.data;
    });
  };

  const secondId = ref();
  const changeTableList = (e) => {
    secondId.value = e;

    getProList(secondId.value);
  };

  const getProList = (cat_second_id: any) => {
    productList({ cat_second_id: cat_second_id }).then((res) => {
      data.value = filter(res.data.data);
    });
  };

  const filter = (array) => {
    array.map((v) => {
      switch (v.status) {
        case 10:
          v.status = '备货中';
          break;
        case 20:
          v.status = '组装中';
          break;
        case 30:
          v.status = '测试中';
          break;
        case 40:
          v.status = '打包出货';
          break;
      }
      console.log(v.is_activation);

      switch (v.is_activation) {
        case 0:
          v.is_activation = '未激活';
          break;
        case 1:
          v.is_activation = '已激活';
          break;
        default:
          v.is_activation = '未激活';
      }
    });

    return array;
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '机器编码',
      dataIndex: 'code',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '二级分类',
      dataIndex: 'cat_second_name',
      align: 'center',
    },
    {
      title: '购买凭证',
      dataIndex: 'voucher',
      align: 'center',
    },
    {
      title: '是否激活',
      dataIndex: 'is_activation',
      align: 'center',
    },
    {
      title: '状态信息',
      dataIndex: 'status',
      align: 'center',
    },
    {
      title: '操作',
      slotName: 'province',
      align: 'center',
    },
  ];

  const data = ref([]);

  const treeData = ref();

  //详情

  const form = ref();
  const detail = (e) => {
    form.value = filterStatus(e);

    visible.value = true;
  };

  const visible = ref(false);

  const filterStatus = (v) => {
    switch (v.status) {
      case '0' || null:
        v.status = '未激活';
        break;
      case '1':
        v.status = '已激活';
        break;
    }
    return v;
  };

  const statusVisible = ref(false);

  const handleOk = () => {
    visible.value = false;
  };
  const handleCancel = () => {
    visible.value = false;
  };

  const filterOneStatus = (v) => {
    switch (v.status) {
      case '备货中':
        v.status = '10';
        break;
      case '组装中':
        v.status = '20';
        break;
      case '测试中':
        v.status = '30';
        break;
      case '打包出货':
        v.status = '40';
        break;
    }
    return v;
  };
  const cloumns = ref<any>();
  const cloumnStatus = ref();
  const changeHandler = (record) => {
    cloumns.value = record;
    cloumnStatus.value = filterOneStatus(record.status);
    statusVisible.value = true;
  };

  //修改状态
  const Ok = () => {
    const msg = {
      id: cloumns.value.id,
      status: statusChange.value,
    };
    changeStatus(msg).then((res: any) => {
      if (res.code === 200) {
        Message.success('修改状态成功');
        getProList(secondId.value);
      }
    });

    statusVisible.value = false;
  };
  const Cancel = () => {
    statusVisible.value = false;
  };

  const statusChange = ref();
  const changeStatusHandler = (e) => {
    statusChange.value = e;
  };

  //删除
  const delItem = (v) => {
    delProduction({ id: v.id }).then((res: any) => {
      if (res.code === 200) {
        Message.success('删除成功');
        getProList(secondId.value);
      }
    });
  };

  //新增修改删除
  const statusVisible2 = ref(false);
  const statusVisible3 = ref(false);
  const statusVisible4 = ref(false);

  const add = () => {
    statusVisible2.value = true;
    getOnePro();
  };
  const values = ref();
  const fieldNames = { value: 'id', label: 'cat_name' };
  const options = ref();
  const secondName = ref();
  const changeSecondName = (e) => {
    secondName.value = e;
  };
  const change = () => {
    statusVisible3.value = true;
  };

  const del = () => {
    statusVisible4.value = true;
  };

  const getOnePro = () => {
    producOne().then((res) => {
      options.value = res.data;
    });
  };
  const Ok1 = () => {
    const msg = { pid: statusChange.value, cat_name: secondName.value };
    addproducOne(msg).then((res: any) => {
      if (res.code === 200) {
        Message.success('添加成功');
        getProductTree();
      }
    });
  };

  const changeName = ref();
  const oneChange = ref();
  const changeOne = (e) => {
    oneChange.value = e;
  };
  const changeSecondNameHandler = (e) => {
    changeName.value = e;
  };
  const Ok2 = () => {
    editProductionCat({ id: oneChange.value, cat_name: changeName.value }).then(
      (res: any) => {
        if (res.code === 200) {
          Message.success('修改成功');
          getProductTree();
        }
      }
    );
  };

  //分类删除
  const one = ref();
  const delOne = (e) => {
    one.value = e;
  };
  const Ok3 = () => {
    deleteProductionCat({ id: one.value }).then((res: any) => {
      if (res.code === 200) {
        Message.success('删除成功');
        getProductTree();
      }
    });
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
</style>
